<template>
    <div class="mail">
        <div class="mail-info">
            <div class="mail-box">
                <div class="user-wrapper">
                    <div class="item">
                        <div class="text"><i class="icon iconfont icon-transaction_fill"></i>邮寄公司</div>
                        <div class="form">
                            <select class="provice" v-model="mailinfo.come_company">
                                <option value="-1">请选择邮寄公司</option>
                                <option :value="item.name" v-for="item in mailCompany" v-if="mailCompany">{{item.name}}</option>
                            </select>
                        </div>
                    </div>
                    <div class="item noborder">
                        <div class="text"><i class="icon iconfont icon-iconzhuyenor"></i>邮寄单号</div>
                        <div class="form">
                            <input type="text" placeholder="请填写您的邮寄单号" v-model="mailinfo.come_code"/>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 提示信息 -->
        <div class="note">
            <i class="icon iconfont icon-prompt_fill"></i>
            <div class="text">请优先选择顺丰到付（0元免邮费）！</div>
        </div>
        <!-- 提交按钮 -->
        <div class="search-btn" @click="mailSubmit">
            <button-medium text="提交信息"></button-medium>
        </div>
    </div>
</template>

<script>
import {toast} from '../../base/js/toast.js'
import ButtonMedium from '../parts/buttonMedium.vue'    //按钮
import {Trim} from '../../common/js/dom.js'                 //去除空格
export default {
    data() {
        return {
            order_code: this.$route.query.order_code,   //当前订单编号
            order:{},           //当前订单信息
            mailCompany: [],     //邮寄公司数组
            mailinfo:{         //用户填写的邮寄单号
                come_company: -1,
                come_code: ''
            } 
        }
    },
    components: {ButtonMedium},
    created() {
        //获取邮寄公司
        this.getMailCompany()
        //获取订单信息
        this.getOrderInfo(this.order_code)
        
    },
    methods: {
        //获取邮寄公司信息
        async getMailCompany() {
            var result = await this.$ajax.get('/mail')
            if(result.status == 200) {
                this.mailCompany = result.data
            }
            // console.log(this.mailCompany)
        },
        //获取订单信息
        getOrderInfo(id){
            var str = localStorage.getItem('hs_order')
            var strObj = JSON.parse(str)
            strObj.forEach(item => {
                if(item.order_code == id) {
                    //修改邮寄信息的默认值
                    if(item.mailinfo){
                        this.mailinfo = item.mailinfo
                    }
                }
            })
        },
        //获取本地存储的订单，存储邮寄信息
        storageMailInfo(id, mailinfo) {
            var str = localStorage.getItem('hs_order')
            var strObj = JSON.parse(str)
            strObj.forEach(item => {
                if(item.order_code == id) {
                    //修改邮寄信息
                    item.mailinfo = mailinfo
                    //修改订单状态
                    item.order_state = 2
                }
            })
            //本地存储
            str = JSON.stringify(strObj)
            localStorage.setItem('hs_order', str)
        },
        //提交邮寄信息
        mailSubmit() {
            if(this.mailinfo.come_company == -1){
                toast('请选择邮寄公司！')
                return
            }
            if(Trim(this.mailinfo.come_code) == ''){
                toast('请填写邮寄单号！')
                return
            }
            //本地存储邮寄信息
            this.storageMailInfo(this.order_code, this.mailinfo)
            //退回上一页
            this.$router.go(-1)
        }
    }
}
</script>
<style  lang="less" scoped>
    @import "../../common/less/variable.less";
    .mail{
        position:fixed;
        top:0;
        bottom:0;
        left:0;
        width:100%;
        z-index:93;
        background:@color-gray-bg;
        .mail-info{
            width:100%;
            box-sizing:border-box;
            .mail-box{
                width:100%;
                background:#fff;
                padding:0;
                box-sizing: border-box;
                border-radius:@border-alert-radius;
                padding:0 10px;
                .item{
                    display:flex;
                    height:50px;
                    line-height:50px;
                    border-bottom:1px solid @color-alert-line;
                    &.noborder{border:none}
                    .text{
                        flex:0 0 90px;
                        font-size:14px;
                        color:@color-alert-con;
                        line-height: 50px;
                        i{
                            vertical-align:middle;
                            color:#ccc;
                            font-size:20px;
                            margin-right:5px;
                        }
                    }
                    &:nth-child(6){
                        .text{
                            i{
                                font-size:16px;
                            }
                        }
                    }
                    .form{
                        flex:1;
                        margin-left:10px;
                        font-size:14px;
                        color:@color-alert-title;
                        line-height:50px;
                        input{
                            font-size:14px;
                            height:50px;
                            line-height:50px;
                            width: 100%;
                            text-indent:5px;
                        }
                        select{
                            border:none;
                            font-size:14px;
                            height:50px;
                            line-height:50px;
                            width: 100%;
                            
                        }
                    }
                }
            }
        }
        .note{
            text-align:center;
            font-size:12px;
            color:@color-red;
            margin:10px 0 50px;
            i{
                vertical-align:middle;
                font-size:19px;
            }
            .text{
                display:inline-block;
            }
        }
    }
</style>
